<template>
  <div class="top">
    <router-link to="/home">
      <van-nav-bar title="彩妆" left-arrow fixed @click-left="onClickLeft" />
    </router-link>
    <div class="inp">
      <input placeholder="路铂廷" />
      <div class="tu"></div>
      <img src="https://m.cdfgsanya.com/wap/resources/images/icons/icon-search@2x.444b6495.png" class="img1" alt="" />
      <img src="https://m.cdfgsanya.com/wap/resources/images/icons/icon-customer-service@2x.dfee9fd8.png" class="img2"
        alt="" />
      <div class="swiper">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="pink">
          <van-swipe-item v-for="(v, index) in arr" :key="index">
            <img :src="v.img" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div>
        <ul>
          <li v-for="(v, index) in list" :key="index" @click="fun()">
            <img :src="v.pic" alt="" />
            <p>{{ v.title }}</p>
          </li>
        </ul>
      </div>
      <div class="temai">
        <div class="t1">
          <img src="https://pic.cdfgsanya.com/assets/upload/visual/1250b774c5c8870103b2339dc0d82003.png" class="img3"
            alt="" />
          <span>超值单品</span>
        </div>
        <div class="qingcang">
          <div class="sp" v-for="(v, index) in shop" :key="index">
            <img :src="v.img" alt="" />
            <p class="m1">{{ v.newprice }}</p>
            <p class="m2">{{ v.oldprice }}</p>
          </div>
        </div>
      </div>
      <div class="jx">
        <div class="jxtop">
          <img src="https://pic.cdfgsanya.com/assets/upload/visual/1250b774c5c8870103b2339dc0d82003.png" alt="" />
          <span>品牌精选</span>
        </div>
        <div class="ppjx">
          <div class="pp" v-for="(v, index) in pinpai" :key="index">
            <img :src="v.img" alt="" />
          </div>
        </div>
      </div>
      <Contentvue></Contentvue>
    </div>
  </div>
</template>

<script>
// import service from "../../../utils/service";
import service from '@/utils/service';
import Contentvue from '../home/content.vue'
export default {
  data() {
    return {
      value: "",
      arr: [],
      list: [],
      shop: [],
      pinpai: []
    };
  },
  methods: {
    onClickLeft() {
      console.log("返回");
    },
    fun() {
      this.$router.push('/saihong')
    }
  },
  components: {
    Contentvue,
  },
  mounted() {
    service({
      url: "http://localhost:3000/caizhuang_banner",
      method: "get",
    }).then((res) => {
      console.log(res.data);
      this.arr = res.data;
    });
    service({
      url: "http://localhost:3000/caizhuanglist",
      method: "get",
    }).then((res) => {
      console.log(res.data);
      this.list = res.data;
    });
    service({
      url: "http://localhost:3000/caizhuangSale",
      method: "get",
    }).then((res) => {
      console.log(res.data);
      this.shop = res.data;
    });
    service({
      url: "http://localhost:3000/caizhuang_pinpai",
      method: "get",
    }).then((res) => {
      console.log(res.data);
      this.pinpai = res.data;
    });
  },
};
</script>

<style scoped>
.inp {
  width: 100%;
  height: 170px;
  margin-top: 46px;
  background-image: url(https://pic.cdfgsanya.com/assets/upload/visual/620732bba82d6759cee4b9c9d3dd2239.png);
}

.inp input {
  width: 255px;
  height: 30px;
  border-radius: 20px;
  border: none;
  font-size: 12px;
  padding-left: 32px;
  margin: 7px 20px;
}

.inp .img1 {
  width: 20px;
  margin-top: -30px;
  margin-left: 27px;
}

.inp .img2 {
  width: 20px;
  margin-top: -30px;
  margin-left: 280px;
}

.swiper {
  width: 95%;
  height: 126px;
  margin-left: 9px;
  margin-top: -20px;
  border-radius: 12px;
}

.swiper img {
  width: 100%;
  height: 126px;
  border-radius: 12px;
}

ul {
  height: 176px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
}

li {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

li img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.temai {
  width: 355px;
  height: 197px;
  background-color: white;
  margin: 10px;
  border-radius: 10px;
}

.t1 {
  display: flex;
}

.t1 .img3 {
  height: 20px;
  padding: 7px 5px;
}

.t1 span {
  font-weight: 700;
  padding: 5px;
}

.qingcang {
  width: 100%;
  height: 160px;
  overflow-x: auto;
  display: -webkit-box;
}

.sp {
  width: 100px;
  float: left;
  margin: 0 12px;
}

.sp img {
  width: 90px;
  height: 90px;

}

.sp .m1 {
  font-size: 14px;
  padding: 10px 0;
  text-align: center;
}

.sp .m2 {
  font-size: 10px;
  text-align: center;
  width: 50px;
  height: 18px;
  background-color: antiquewhite;
  border-radius: 10px;
  line-height: 20px;
  margin-left: 20px;
  color: rgb(219, 147, 59);
}

.jx {
  width: 355px;
  height: 163px;
  background-color: white;
  margin: 10px;
  border-radius: 10px;
}

.jxtop {
  line-height: 30px;

}

.jxtop img {
  height: 20px;
  padding: 5px;
}

.jxtop span {
  font-weight: 700;
}

.ppjx {
  width: 90%;
  height: 130px;
  float: left;
  margin-left: 17px;
}

.pp {
  width: 20%;
  height: 65px;
  float: left;
}

.pp img {
  width: 100%;
  height: 85%;
}
</style>